import React, { Component } from 'react';

import styled from 'styled-components'

import { Link } from 'react-router-dom'

import border from '../../../assets/thema/border'

import { Tabs } from 'antd-mobile';


const OrderContair = styled.div`
    .zong{
        text-align:center
        .content{
            .head{
                font-size:0.12rem
                display:flex
                justify-content:space-around
                margin-top:0.2rem
            }
            .neirong{
                display: flex
                flex-direction:column
                align-items:center
                width:100%
                height:100%
                backgroundColor:#fff
            }
            .am-tabs-default-bar-underline{
                background:#fe4070!important
            }
            
        }
    }
    
`

const Subscribe = border({
    component: styled.div`
        padding:.08rem 0 0 .1rem
        height:1rem
        width:100%
        margin-bottom:0.1rem
        display:flex
        justify-content:space-around
        .ImgBox{
            img{
                width:.84rem
                height:.84rem
            }
        }
        .Font{
            p{
                text-align:left!important
            }
            .settlement{
                position:relative
                bottom:0.15rem;
                left:2rem
                a{
                    color:#ed145b
                }
            }

        }
     `,
    width: ' 0 0 1px 0 ',
    style: 'solid',
    color: '#ccc',
    radius: 0,
})

const Header = border({
    component: styled.div`
        width:100%
        display:flex
        justify-content:space-around
        height:.44rem
        line-height:.44rem
        .goback{
        width:0.54rem
        font-size:0.26rem
        a{
            color:#ccc;
        } 
        }
        .title{
            flex:1 
            font-size:0.16rem
        }
        .home{
            width:.54rem
            font-size:0.22rem 
            a{
                color:#ccc;
            } 
        }
    
    `,
    width: ' 0 0 1px 0 ',
    style: 'solid',
    color: '#ccc',
    radius: 0,
})


const tabs2 = [
    { title: '全部', sub: '1' },
    { title: '待付款', sub: '2' },
    { title: '待发货', sub: '3' },
    { title: '待收货', sub: '4' },
    { title: '待评价', sub: '5' },
];

const Item = props => {
    return (
        <Subscribe>
            <div className="ImgBox">
                <img src={props.goodsimg} />
            </div>
            <div className="Font">
                <p className="name" style={{ padding: '.08rem 0.1rem 0 0.14rem' }}>{props.goodstitle}</p>
                <p className="price" style={{ padding: '.2rem 0.1rem 0 0.14rem ' }}> ￥{props.nowprice}</p>
                <p className="settlement">
                    <Link to="/shopcar">
                        去结算
                    </Link>
                </p>
            </div>
        </Subscribe>
    )
}

class Order extends Component {
    // 返回上一届
    back = () => {
        const { go } = this.props.history
        go(-1)
    }

    constructor(props) {
        super(props)
        this.state = {
            data: localStorage.getItem('shopcar') && JSON.parse(localStorage.getItem('shopcar'))||[],

        }
    }

    renderItem = () => {
        return this.state.data.map(item => <Item key={item.id} {...item} />)
    }



    render() {
        const shopCar = JSON.parse(localStorage.getItem('shopcar'))
        console.log(shopCar)
        return (
            <OrderContair>
                <div className="zong">
                    <Header>
                        <div className="goback">
                            <a onClick={this.back}><i className='fa fa-angle-left' ></i></a>
                        </div>
                        <div className="title">我的订单</div>
                        <div className="home">
                            <Link
                                to="/home"
                            ><i className='fa fa-home' ></i></Link>  </div>
                    </Header>
                    <div className="content">
                        <Tabs tabs={tabs2}
                            initialPage={0}
                            tabBarPosition="top"
                            renderTab={tab => <span>{tab.title}</span>}
                        >
                            <div className="neirong" >
                                {this.renderItem()}
                            </div>
                            <div className="neirong">
                                {this.renderItem()}
                            </div>
                            <div className="neirong">

                            </div>
                            <div className="neirong">

                            </div>
                            <div className="neirong">

                            </div>
                        </Tabs>
                    </div>
                </div>
            </OrderContair>
        )
    }
}

export default Order